<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>S.DD demo</title>
<style>
    #dialog {
        border: 1px solid green;
        position: absolute;
        width: 500px;
        height: 300px;
    }

    #header {
        border-bottom: 1px solid green;
        cursor: move;
    }

    #close {
        float: right;
        display: inline;
        margin: 0 5px;
    }
</style>
</head>
<body>
<div id="dialog">
    <div id="header">
        可拖动头
        <a href="#" id="close">
            X
        </a>
    </div>
    <div id="body">
        内容
    </div>

</div>

<script src="../../build/kissy.js"></script>
<script src="ddm.js"></script>
<script src="draggable.js"></script>

<script>
    KISSY.ready(function(S) {

        var close = S.one("#close"),
            node = S.one("#dialog");

        var h = new S.Draggable({
            node: node,
            handlers: [S.one("#header")]
        });

        close.on("click", function(ev) {
            node.hide();
            ev.preventDefault();
        });

        h.on("drag", function(ev) {
            if (ev.left < 0) return;
            node.offset(ev);
        });
    });
</script>
</body>
</html>
